<template>
  <div>
    <div>
      <a-modal
        v-model:visible="visible"
        title="路况信息"
        @ok="handleOk"
        width="80%"
      >
        <a-input-search
          placeholder="请输入关键词"
          style="width: 40%"
          @search="onSearch"
        />

        <!-- 表格 -->
        <div>
          <a-table
            :columns="columns"
            :data-source="eventArr"
            :pagination="paginationOpt"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'ID'">
                <a href="">{{ record.user_id }}</a>
              </template>
              <template v-else-if="column.key === 'type'">
                <a href="">{{ record.event_type }}</a>
              </template>
              <template v-else-if="column.key === 'address'">
                <a href="">{{ record.event_address }}</a>
              </template>
              <template v-else-if="column.key === 'mark'">
                <a href="">{{ record.event_mark }}</a>
              </template>
              <template v-else-if="column.key === 'time'">
                <a href="">{{ record.event_time }}</a>
              </template>
              <template v-else-if="column.key === 'describe'">
                <a href="">{{ record.event_describe }}</a>
              </template>
              <template v-else-if="column.key === 'status'">
                <span v-if="record.event_status == 1">通过审核</span>
                <template v-else-if="record.event_status != 1">
                  <a-tag color="#5cb85c" @click="handlePass(record.id)">
                    通过
                  </a-tag>
                  <a-tag color="#f0ad4d" @click="handleIgnore(record.id)">
                    忽略
                  </a-tag>
                </template>
              </template>
            </template>
          </a-table>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script setup>
import http from '@/request/load.js'
import { ref, reactive, onMounted } from 'vue'
const visible = ref(false)
const current = ref(2)
// 请求获取所有事件数据
const eventArr = ref([])

// 分页
let paginationOpt = reactive({
  defaultCurrent: 1, // 默认当前页数
  defaultPageSize: 5, // 默认当前页显示数据的大小
  total: 0, // 总数，必须先有
  showSizeChanger: true,
  showQuickJumper: true,
  pageSizeOptions: ['5', '10', '15', '20'],
  showTotal: (total) => `共 ${total} 条`, // 显示总数
  onShowSizeChange: (current, pageSize) => {
    paginationOpt.defaultCurrent = 1
    paginationOpt.defaultPageSize = pageSize
  },
  // 改变每页数量时更新显示
  onChange: (current, size) => {
    paginationOpt.defaultCurrent = current
    paginationOpt.defaultPageSize = size
  },
})

// 第一次请求
http.getLoadInformation().then((res) => {
  eventArr.value = res.result
})

// 对话框
const showModal = () => {
  visible.value = true
}
const handleOk = (e) => {
  console.log(e)
  visible.value = false
}

// 搜索

const onSearch = (searchValue) => {
  console.log('use value', searchValue)
  http.postSearchInformation(searchValue).then((res) => {
    eventArr.value = res.result
    console.log(res)
  })
}

// 表头
const columns = [
  {
    title: '用户ID',
    dataIndex: 'ID',
    key: 'ID',
  },
  {
    title: '事件类型',
    dataIndex: 'type',
    key: 'type',
  },
  {
    title: '事件地址',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '附近建筑',
    key: 'mark',
    dataIndex: 'mark',
  },
  {
    title: '发生时间',
    key: 'time',
    dataIndex: 'time',
  },
  {
    title: '事件描述',
    key: 'describe',
    dataIndex: 'describe',
  },
  {
    title: '操作',
    key: 'status',
    dataIndex: 'status',
  },
]
// 通过
const handlePass = (id) => {
  http.postLoadInformation(id).then((res) => {
    console.log(res)
  })
  // 重新获取数据
  http.getLoadInformation().then((res) => {
    eventArr.value = res.result
  })
}
// 忽略
const handleIgnore = (id) => {
  alert('确定要删除吗?数据不可恢复!')
  http.postIgnoreInformation(id).then((res) => {
    console.log(res)
  })
  // 重新获取数据
  http.getLoadInformation().then((res) => {
    eventArr.value = res.result
  })
}
defineExpose({ showModal })
</script>

<style scoped>
::v-deep .ant-tag:hover {
  cursor: pointer;
}
::v-deep .ant-modal-body {
  display: flex;
  justify-content: center;
}
::v-deep .ant-input-group {
  margin-left: 21vw;
}
</style>
